<template>
  <div class="login-wrap" :style="{ backgroundImage: loginBg }">
    <canvas id="login-canvas"></canvas>
    <div class="login-box">
      <el-form
        label-position="left"
        label-width="80px"
        :model="fullLogoMsg"
        :rules="rules"
        ref="ruleForm"
        @submit.native.prevent
      >
        <el-form-item label="账号" prop="user">
          <el-input
            placeholder="请输入用户名"
            clearable
            v-model="fullLogoMsg.user"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入密码"
            show-password
            v-model="fullLogoMsg.password"
          ></el-input>
        </el-form-item>
        <el-form-item class="captcha" label="验证码" prop="verifyValue">
          <el-input
            placeholder="请输入验证码"
            v-model="fullLogoMsg.verifyValue"
          ></el-input>
          <div class="captchaStyle">
            <img class="captcha" :src="imgData.img" @click="getCaptcha" alt="验证码" />
          </div>
        </el-form-item>
        <!--<div class="remPsd">
          <el-checkbox v-model="isChecked">记住密码</el-checkbox>
        </div>-->
        <el-button
          :plain="true"
          round
          style="margin-top: 20px"
          native-type="submit"
          @click="loginSuccess('ruleForm')"
        >登 录</el-button
        >
      </el-form>
      <!--<div class="footerFont">
        <div>
          还没有账号？<span class="goRegister" @click="goRegister('register')"
        >去注册</span
        >
        </div>
        <div class="goRegister" @click="goRegister('changPasswordo')">
          忘记密码？
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
  import "../../assets/login/TweenLite.min.js";
  import { loginFn } from "../../assets/login/login.js";
  export default {
    name: "login",
    data() {
      const validateName = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入用户名"));
        } else {
          if (!/^(?![0-9]+$)[0-9A-Za-z]{3,30}$/.test(value)) {
            callback(new Error("请输入3-30位的字母或数字字母组合!"));
          }
          callback();
        }
      };
      const validateCaptchaImg = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入图形验证码"));
        } else {
          callback();
        }
      };
      const validatePassword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (value.length < 6) {
            callback(new Error("请输入最低6位的密码"));
          }
          callback();
        }
      };
      return {
        loginBg: "url(" + require("../../assets/img/loginBg.jpg") + ")",
        fullLogoMsg: {
          user: "",
          password: "",
          verifyValue: ""
        },
        rules: {
          user: [{ validator: validateName, required: true, trigger: "blur" }],
          password: [{ validator: validatePassword, required: true, trigger: "blur" }],
          verifyValue: [
            { validator: validateCaptchaImg, required: true, trigger: "blur" }
          ]
        },
        isChecked: false,
        imgData: {}
      };
    },
    methods: {
      //获取验证码
      getCaptcha() {
        this.$get("/v1/captcha").then(res => {
          if(res.data.code === 200) {
            this.imgData = res.data.data;
          } else {
            this.$message.error(res.data.message);
          }
        })
      },
      //登录
      loginSuccess(form) {
        this.$refs[form].validate(valid => {
          if (valid) {
            this.fullLogoMsg.captchaId = this.imgData.captchaId;
            this.$put(`/v1/user/${this.fullLogoMsg.user}/login`, this.fullLogoMsg).then(res => {
              console.log(res);
              if (res.data.code === 200) {
                this.$message.success(res.data.message);
                sessionStorage.setItem(
                        "userName",
                        this.fullLogoMsg.user
                );
                sessionStorage.setItem(
                        "accessToken",
                        res.data.data.accessToken
                );
                this.$router.push("/addProject");
              } else {
                this.$message.error(res.data.message);
                this.getCaptcha();
              }
            })
          }
        })
      }
    },
    mounted() {
      loginFn();
      this.getCaptcha();
    },
  }
</script>

<style scoped lang="scss">
  .login-wrap {
    overflow: hidden;
  }
  .login-box {
    width: 430px;
    text-align: center;
    padding: 50px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.2);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 224px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
  .remPsd {
    text-align: right;
  .el-checkbox {
    color: #fff;
  }
  }
  button {
    width: 120px;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
    color: rgba(255, 255, 255, 0.8);
    background: transparent;
  }

  .footerFont {
    font-weight: unset;
    font-size: 14px;
    margin-top: 20px;
    color: white;
    display: flex;
    justify-content: space-between;
  }
  p {
    font-size: 12px;
    color: red;
    text-align: left;
    position: absolute;
    top: 30px;
  }
  .captcha {
  img {
    cursor: pointer;
    height: 40px;
    width: 168px;
  }
  }
  .goRegister {
    cursor: pointer;
    color: #409eff;
  }
  }
  .captcha /deep/ .el-form-item__content {
    display: flex;
  }
  .login-box /deep/ .el-form-item__label {
    color: white;
  }
  .captchaStyle {
    background: #fff;
    height: 40px;
  }
</style>
